<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>流体布局2</title>
	<!-- 流体布局就是宽度上给%，高度就是多少给多少 -->

	<style type="text/css">
		body,ul{
			margin: 0;
			padding: 0;
		}

		ul{
			list-style: none;
		}

		.menu{
			height: 50px;
		}


		/*自动缩放，每个占25%*/
		.menu li{
			/*
			
			第一种解决宽度超过的方法
			width: calc(25% - 4px);
			 */	
			width: 25%;
			
			height: 50px;
			text-align: center;
			line-height: 50px;
			float: left;
			background-color: gold;
			border: 2px solid #000;

			/*第二种解决宽度超过的方法*/
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="">菜单文字</a></li>
		<li><a href="">菜单文字</a></li>
		<li><a href="">菜单文字</a></li>
		<li><a href="">菜单文字</a></li>
	</ul>
</body>
</html>